
<template>
    <div> 
        这是P1view
        欢迎你：{{$store.state.name}}====年龄：{{$store.state.age}}
        <br>
        <button @click="changeName('张三')">通过mutation更改共享数据</button>
        <br>
        <button @click="changeAge(90)">异步action更改年龄</button>

    </div>
    </template>
    
    <script>
      export default {
        name: 'P1View',
        methods :{
          changeName(name){
            this.$store.commit('setName',name)
          },
          changeAge(age){
            this.$store.dispatch('actionSetAge',age)
          }
      }
    }
  
    </script>
    
    <style scoped>
    .el-header,
      .el-footer {
        background-color: #b3c0d1;
        color: var(--el-text-color-primary);
        text-align: center;
        line-height: 60px;
      }
    
      .el-aside {
        background-color: #d3dce6;
        color: var(--el-text-color-primary);
        text-align: center;
        line-height: 200px;
      }
    
      .el-main {
        background-color: #e9eef3;
        color: var(--el-text-color-primary);
        text-align: center;
        line-height: 160px;
      }
    
      body > .el-container {
        margin-bottom: 40px;
      }
    
      .el-container:nth-child(5) .el-aside,
      .el-container:nth-child(6) .el-aside {
        line-height: 260px;
      }
    
      .el-container:nth-child(7) .el-aside {
        line-height: 320px;
      }
    </style>
    